<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../../../H5前端课程/jquery/jquery_day07/assets/css/swiper.css">
    <link rel="stylesheet" href="../../../../H5前端课程/jquery/jquery_day07/assets/css/animate.min.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1424468_9rx5tbs422.css">
    <style>
        *{padding: 0; margin: 0; border: 0; list-style: none;}
        .swiper-container{
            width: 190px;
            height: auto;
            /*background:pink;*/
            margin:100px auto;
            position: relative;
        }
        .swiper-slide{
            display:flex;
            flex-direction:column;
        }
        .swiper-slide img{
            width: 190px;
            height: 150px;
         }
        .swiper-slide img:nth-child(2){
            margin:10px 0;
        }
        .swiper-button-prev i.iconfont{
            color:#fff;
        }
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="../images/pro1.jpg"/>
                <img src="../images/pro2.jpg"/>
                <img src="../images/pro3.jpg"/>
            </div>
            <div class="swiper-slide">
                <img src="../images/pro4.jpg"/>
                <img src="../images/pro5.jpg"/>
                <img src="../images/pro6.jpg"/>
            </div>
            <div class="swiper-slide">
                <img src="../images/pro7.jpg"/>
                <img src="../images/pro8.jpg"/>
                <img src="../images/pro9.jpg"/>
            </div>
            <div class="swiper-slide">
                <img src="../images/pro10.jpg"/>
                <img src="../images/pro11.jpg"/>
                <img src="../images/pro12.jpg"/>
            </div>
        </div>

        <!-- 如果需要分页器 -->

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev">
            <i class="iconfont icon-xiangzuoanniu"></i>
        </div>
        <div class="swiper-button-next">
            <i class="iconfont icon-xiangyouanniu"></i>
        </div>

        <!--&lt;!&ndash; 如果需要滚动条 &ndash;&gt;-->
        <!--<div class="swiper-scrollbar"></div>-->

    </div>
    <script src="../../../../H5前端课程/jquery/jquery_day07/assets/js/swiper.min.js"></script>
    <script src="../../../../H5前端课程/jquery/jquery_day07/assets/js/swiper.animate.min.js"></script>
    <script>
        var swiper = new Swiper(".swiper-container",{
            pagination: {
                el: '.swiper-pagination',
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            // autoplay:true,//等同于以下设置
            // autoplay: {
            //   delay: 2000,
            //   stopOnLastSlide: false,
            //   disableOnInteraction: true,
            //   },
            loop:true,
            effect:'fade',
        })
    </script>
</body>
</html>